<template>
	<el-scrollbar style="height: 100%;" v-if="needAppScrollbar"><router-view /></el-scrollbar>
	<router-view v-else />
</template>

<script>
import { $get, $post } from '@/puigins/request.js';
export default {
	computed: {
		needAppScrollbar() {
			return this.$store.state.needAppScrollbar;
		}
	},
	created() {}
};
</script>

<style lang="scss">
* {
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}

html,
body,
#app {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#app {
	display: flex;
	flex-direction: column;
}
.el-scrollbar__bar {
	z-index: 10010;
}
.jc{
	display: flex;
	justify-content: center;
	align-items: center;
}

html[auto-stream] {
	.auto-height {
		//使用这种布局时，就算设置height:100%,实际高度也没有父容器那么高，因为父容器设的是min-height
		//所以这里如果需要保证和父容器一样高，需要设置和父容器一样的min-height
		min-height: calc(100vh - 60px - 35px);
	}
	#container {
		//100vh表示整个屏幕高度,1vh表示1%的屏幕高度
		//减去页头高度、页脚高度
		min-height: calc(100vh - 60px - 35px);
	}
}
@media screen and (max-width: 768px) {
	html[auto-stream] {
		.auto-height {
			//使用这种布局时，就算设置height:100%,实际高度也没有父容器那么高，因为父容器设的是min-height
			//所以这里如果需要保证和父容器一样高，需要设置和父容器一样的min-height
			min-height: calc(100vh - 60px - 60px);
		}
		#container {
			//100vh表示整个屏幕高度,1vh表示1%的屏幕高度
			//减去页头高度、页脚高度
			min-height: calc(100vh - 60px - 60px);
		}
	}
}
</style>
